<template>
	<view class='productSort'>
		<!-- <view class="tabbar" :style='"opacity:"+opacityNum+ "; height:" + topIconDistance + "rpx"'><span class="tabbar-title">点餐</span></view> -->
		<view class="shop" :style='"height:" +(80 + topIconDistance) + "rpx"' >
			<view class="shop-bg" :style="{backgroundImage : 'url('+store.storeImage+')'}"></view>
			<view class="shop-info">
				<view class="shop-info-item" @click="goStoreDetail" >
					<image  :src="store.storeImage" mode="aspectFill"></image>
					<view class="shop-desc">
						<text>{{store.storeName}}</text>
						<i>{{store.storeDesc}}</i>
					</view>
					<!-- <text class="shop-go iconfont icon-xiangyou"  @click="goStoreDetail"></text> -->
				</view>
			</view>
		</view>
		<view class="header">
			<view class='search'>
				<text class='iconfont icon-sousuo'></text>
				<input type='text' placeholder='点击搜索商品信息' @confirm="searchSubmitValue" confirm-type='search' name="search"
				 placeholder-class='placeholder'></input>
			</view>
			<view class="shippingType">
				<piaoyi-tabs :list="shippingType.value" 
					:current="shippingType.current" 
					:show-bar="false"
					:bold="true" 
					:height="52"
					:font-size="22"
					:active-item-style="shippingType.activeItemStyle"
					@change="handleTabsChange($event, shippingType)"
					/>
			</view>
		</view>
		<view class="content" :style="{height: height + 'rpx'}">
			<view class="left">
				<scroll-view scroll-y="true" scroll-with-animation='true' style="height: 100%;">
					<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' v-for="(item,index) in productList"
				 :key="index" @click='tap(index,"b"+index)'><text>{{item.name}}</text></view>
				</scroll-view>
			</view>
			<view class="right" >
				<scroll-view scroll-y="true" :scroll-into-view="toView" :style='"height:"+height+"rpx; " ' @scroll="scroll"
				 scroll-with-animation='true'>
					<block v-for="(itemParent,index) in productList" :key="index">
						<view class='listw' :id="'b'+index">
							<view class='title acea-row row-center-wrapper'>
								<view class='line'></view>
								<view class='name'>{{itemParent.name}}</view>
								<view class='line'></view>
							</view>
							<view class='list acea-row'>
								<block v-for="(item,indexn) in itemParent.child" :key="indexn">
									<view hover-class='none' class="item-content">
										<view class="item" :class='is_switch==true?"":"on"'>
											<view class='pictrue' :class='is_switch==true?"":"on"'>
												<navigator hover-class='none'  :url='"/pages/goods_details/index?id="+item.id'>
													<image :src='item.image' :class='is_switch==true?"":"on"'></image>
												</navigator>
												<span class="pictrue_log_class"
													:class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'"
													v-if="item.activityH5 && item.activityH5.type === '1'">秒杀</span>
												<span class="pictrue_log_class"
													:class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'"
													v-if="item.activityH5 && item.activityH5.type === '2'">砍价</span>
												<span class="pictrue_log_class"
													:class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'"
													v-if="item.activityH5 && item.activityH5.type === '3'">拼团</span>
											</view>
											
											<view class='text' :class='is_switch?"":"on"'>
												<view class='name line1'>{{item.storeName}}</view>
												<view class='money font-color-red' :class='is_switch?"":"on"'>￥<text
														class='num'>{{item.price}}</text></view>
												<view class='vip acea-row row-between-wrapper' :class='is_switch?"":"on"'>
													<view class='vip-money' v-if="item.vip_price && item.vip_price > 0">￥{{item.vip_price}}
														<image src='../../static/images/vip.png'></image>
													</view>
													<view>已售{{Number(item.sales) + Number(item.ficti) || 0}}{{item.unitName}}</view>
										
												</view>
											</view>
										</view>
										<view class="add-cart">
											<view class="more-spec" v-if="item.specType"  @click="addCart(item)"> 
												<span class="more-spec-text" >规格</span>
												<span class="more-cart-num" v-if="item.cartNum > 0">{{item.cartNum}}</span>
											</view>
											<view class="one-spec" v-else>
												<view class="sub" @click="subCartNum(item)" v-if="item.cartNum > 0" >-</view>
												<span class="num" v-if="item.cartNum > 0">{{item.cartNum}}</span>
												<view class="add" @click="addCartNum(item)"  >+</view>
											</view>
										</view>
									</view>
								</block>
							</view>
						</view>
					</block>
					<view style="height:160rpx;"></view>
				</scroll-view>
				
			</view>
		</view>
		
		<productWindow :attr="attr" :isShow='1'  :iScart='1' :iSplus='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
			@ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @iptCartNum="iptCartNum" @goCat="goCat(1)" id='product-window'>
		</productWindow>
		
		<cartWindow ref="cartWindow" :param="cartAttr" @event_cart_change="eventCartChange"></cartWindow>
		
	</view>
</template>

<script>
	import productWindow from '@/components/productIndexWindow';
	import cartWindow from '@/components/cartWindow';
	import piaoyiTabs from '@/components/piaoyi-tabs/piaoyi-tabs';
	import {
		getCategoryWithProductList,getProductDetail,postCartAdd
	} from '@/api/store.js';
	
	import {
		getCartList,
		getCartCounts,
		changeCartNum,
		cartDel,
		getResetCart
	} from '@/api/order.js';
	
	import {
		storeListApi
	} from "@/api/store";
	import {mapGetters} from "vuex";
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	export default {
		components :{
			productWindow,cartWindow,piaoyiTabs
		},
		computed: mapGetters(['isLogin']),
		data() {
			return {
				opacityNum: 0, // 导航条颜色透明渐变
				topIconDistance : 0,
				
				navlist: [],
				productList: [],
				navActive: 0,
				number: "",
				height: 0,
				hightArr: [],
				toView: "",
				tabbarH: 0,
				is_switch : false,
				isOpen : false,
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {}
				},
				
				cartAttr:{
					cartNumFlag: false,
				},
				productValue: [], //系统属性
				productInfo: {}, //商品详情
				activityH5: [],
				attrTxt: '请选择', //属性页面提示
				attrValue: '', //已选属性
				cartNum : 0, // 购物车商品数量
				type : "normal",
				store:{
					storeName:"萌食小客",
					storeDesc:"",
					storeImage:""
				},
				
				shippingType:{
                    current: 0,
                    value: [
						{name : "配送" , value : 0},
						{name : "自提" , value : 1},
                    ],
                    activeItemStyle: {
                        borderRadius: '52rpx',
						backgroundColor : '#ffaa7f',
                        color: '#fff',
                    }, 
                },
				
			}
		},
		onLoad(options) {
			let that = this;
			options.type == undefined || options.type == null ? that.type = 'normal' : that.type = options.type;
			that.$store.commit("PRODUCT_TYPE", that.type);
			uni.getSystemInfo({
			    success: (res) => {
			      // 获取手机顶部状态栏的高度
			      const statusBarHeight = res.statusBarHeight || 0;
				  console.log("statusBarHeight = "+statusBarHeight)
			      // 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
			      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				  
			      const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
				  
				  console.log("navBarHeight = "+navBarHeight)
			      // 计算顶部图标距离
			      that.topIconDistance = (statusBarHeight + navBarHeight) *750/res.windowWidth ;
				  
				  
			    },
			    fail: (err) => {
			      console.error('获取系统信息失败:', err);
			    },
			  });
		},
		onPageScroll(res) {
			//获取距离顶部距离
				const scrollTop = res.scrollTop;
				if (scrollTop >= 0) {
					// 导航条颜色透明渐变
					if (scrollTop <= 20) {
						this.opacityNum = 0
					} else if (20 < scrollTop && scrollTop <= 40) {
						this.opacityNum = scrollTop / 40
					} else if (scrollTop > 40) {
						this.opacityNum = 1
					}
				}
		},

		onShow() {
			let that = this;
			that.shippingType.current = that.$Cache.get("shoppingType") || 0
			that.$store.commit("SHOPPINGTYPE", that.shippingType.current);
			that.getCategoryWithProduct();
			if(that.isLogin){
				that.$refs.cartWindow.getCartNum();
				that.getStoreDetail()
			}
		},
		
		methods: {
			handleTabsChange(index, item) {
				item.current = index;
				this.$forceUpdate();//SHOPPINGTYPE
				this.$store.commit("SHOPPINGTYPE", index);
			},
			
			infoScroll: function() {
				let that = this;
				let len = that.productList.length;
				let child = that.productList[len - 1]&&that.productList[len - 1].child?that.productList[len - 1].child:[];
				this.number = child?child.length:0;
				//设置商品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.height = (res.windowHeight ) * (750 / res.windowWidth) - 100 - that.topIconDistance - 80;
					}
				});
				let hightArr = [];
				for (let i = 0; i < len; i++) {
					//获取元素所在位置
					let query = uni.createSelectorQuery().in(this);
					let idView = "#b" + i;
					query.select(idView).boundingClientRect();
					query.exec(function(res) {
						let top = res[0].top;
						hightArr.push(top);
						that.hightArr = hightArr
					});
				};
			},
			goStoreDetail:function(){
				uni.navigateTo({
					url:"/pages/users/goods_details_store/index"
				})
				
			},
			scroll: function(e) {
				let scrollTop = e.detail.scrollTop;
				let scrollArr = this.hightArr;
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[0]) {
						this.navActive = i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
						this.navActive = scrollArr.length - 1
					}
				}
			},
			tap: function(index, id) {
				this.toView = id;
				this.navActive = index;
			},
			getCategoryWithProduct: function() {
				let that = this;
				getCategoryWithProductList().then(res => {
					that.productList = res.data;
					setTimeout(function(){
						that.infoScroll();
					},500)
				})
			},
			
			getStoreDetail: function() {
				let that = this;
				storeListApi().then(res => {
					let data = res.data.list
					if(data.length > 0){
						that.store.storeName = data[0].name;
						that.store.storeDesc = data[0].introduction;
						that.store.storeImage = data[0].image;
					}
				})
			},
			
			//添加购物车\选择规格
			addCart(item){
				this.productId = item.id
				this.getGoodsDetails(item.id , "normal");
			},
			/**
			 * 获取产品详情
			 */
			getGoodsDetails: function(id, type) {
				let that = this;
				getProductDetail(id, type).then(res => {
					let productInfo = res.data.productInfo;
					that.$set(that, 'productInfo', productInfo);
					that.$set(that.attr, 'productAttr', res.data.productAttr);
					that.$set(that, 'productValue', res.data.productValue);
					that.$set(that, 'activityH5', res.data.activityAllH5 ? res.data.activityAllH5 : []);
					
					let productAttr = this.attr.productAttr.map(item => {
						return {
							attrName : item.attrName,
							attrValues: item.attrValues.split(','),
							id:item.id,
							isDel:item.isDel,
							productId:item.productId,
							type:item.type
						 }
					});
					this.$set(this.attr,'productAttr',productAttr);
					this.goCat(1)
					that.DefaultSelect();
				}).catch(err => {
					
				})
			},
			
			/*
			 * 加入购物车
			 */
			goCat: function(num) {
				let that = this,
					productSelect = that.productValue[this.attrValue];
				//打开属性
				if (that.attrValue) {
					//默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
					that.attr.cartAttr = !that.isOpen ? true : false;
				} else {
					if (that.isOpen) that.attr.cartAttr = true;
					else that.attr.cartAttr = !that.attr.cartAttr;
				}
				
				//只有关闭属性弹窗时进行加入购物车
				if (that.attr.cartAttr === true && that.isOpen === false)
					return (that.isOpen = true);
				
				//如果有属性,没有选择,提示用户选择
				if (that.attr.productAttr.length &&
						productSelect.stock === 0 &&
						that.isOpen === true )
					return that.$util.Tips({
						title: "产品库存不足，请选择其它"
					});
				if (num === 1) {
					let q = {
						productId: parseFloat(that.productInfo.id),
						cartNum: parseFloat(that.attr.productSelect.cart_num),
						isNew: false,
						productAttrUnique: that.attr.productSelect !== undefined ?
							that.attr.productSelect.unique : that.productInfo.id
					};
					postCartAdd(q).then(function(res) {
							that.isOpen = false;
							that.attr.cartAttr = false;
							that.$util.Tips({
								title: "添加购物车成功",
								success: () => {
									// that.$refs.cartWindow.getCartNum();
									that.cartAttr.cartNumFlag = !that.cartAttr.cartNumFlag
									that.getCategoryWithProduct()
								}
							});
						})
						.catch(res => {
							that.isOpen = false;
							return that.$util.Tips({
								title: res
							});
						});
				} else {
					this.getPreOrder();
				}
			},
			
			/**
			 * 立即购买
			 */
			goBuy: function(e) {
				if (this.isLogin === false) {
					toLogin();
				} else {
					this.goCat(0);
				}
			},
			
			
			/**
			 * 默认选中属性
			 * 
			 */
			DefaultSelect: function() {
				let productAttr = this.attr.productAttr;
				let value = [];
				for (let key in this.productValue) {
					if (this.productValue[key].stock > 0) {
						value = this.attr.productAttr.length ? key.split(",") : [];
						break;
					}
				}
				for (let i = 0; i < productAttr.length; i++) {
					this.$set(productAttr[i], "index", value[i]);
				}
				//sort();排序函数:数字-英文-汉字；
				let productSelect = this.productValue[value.join(",")];
				if (productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"storeName",
						this.productInfo.storeName
					);
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "price", productSelect.price);
					this.$set(this.attr.productSelect, "stock", productSelect.stock);
					this.$set(this.attr.productSelect, "unique", productSelect.id);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", value.join(","));
					this.$set(this, "attrTxt", "已选择");
				} else if (!productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"storeName",
						this.productInfo.storeName
					);
					this.$set(this.attr.productSelect, "image", this.productInfo.image);
					this.$set(this.attr.productSelect, "price", this.productInfo.price);
					this.$set(this.attr.productSelect, "stock", 0);
					this.$set(this.attr.productSelect, "unique", this.productInfo.id);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				} else if (!productSelect && !productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"storeName",
						this.productInfo.storeName
					);
					this.$set(this.attr.productSelect, "image", this.productInfo.image);
					this.$set(this.attr.productSelect, "price", this.productInfo.price);
					this.$set(this.attr.productSelect, "stock", this.productInfo.stock);
					this.$set(
						this.attr.productSelect,
						"unique",
						this.productInfo.id || ""
					);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				}
			},
			
			
			/**
			 * 预下单
			 */
			getPreOrder: function() {
				this.$Order.getPreOrder(this.type === 'normal' ? 'buyNow' : 'video', [{
					"attrValueId": parseFloat(this.attr.productSelect.unique),
					"productId": parseFloat(this.id),
					"productNum": parseFloat(this.attr.productSelect.cart_num)
				}]);
			},
			
			//数量减少
			subCartNum:function(item){
				let that = this;
				item.cartNum = Number(item.cartNum) - 1;
				if(item.cartNum > 0){
					changeCartNum(item.cartId, item.cartNum).then(res => {
						that.cartAttr.cartNumFlag = !that.cartAttr.cartNumFlag
					});
				}else{
					//删除购物车
					let cartIds = [];
					cartIds.push(item.cartId)
					cartDel(cartIds).then(res => {
						that.cartAttr.cartNumFlag = !that.cartAttr.cartNumFlag
					})
				}
			},
			//数量增加
			addCartNum:function(item){
				let that = this;
				let curNum = Number(item.cartNum) + 1
				if(curNum > item.stock){
					that.$util.Tips({
						title: "库存已达上限"
					});
					return
				}
				item.cartNum = Number(item.cartNum) + 1;
				
				let q = {
					productId: parseFloat(item.id),
					cartNum: 1,
					isNew: true,
					productAttrUnique: item.productAttrUnique
				};
				postCartAdd(q).then(function(res) {
						that.$util.Tips({
							title: "添加购物车成功",
							success: () => {
								that.cartAttr.cartNumFlag = !that.cartAttr.cartNumFlag
								item.cartId = res.data.cartId
							}
						});
					})
					.catch(res => {
						return that.$util.Tips({
							title: res
						});
					});
				
			},
			
			eventCartChange(){
				this.getCategoryWithProduct();
			},
			
			searchSubmitValue: function(e) {
				if (this.$util.trim(e.detail.value).length > 0)
					uni.navigateTo({
						url: '/pages/goods_list/index?searchValue=' + e.detail.value
					})
				else
					return this.$util.Tips({
						title: '请填写要搜索的产品信息'
					});
			},
			
			onMyEvent: function() {
				this.$set(this.attr, 'cartAttr', false);
				this.$set(this, 'isOpen', false);
			},
			ChangeAttr: function(res) {
				let productSelect = this.productValue[res];
				if (productSelect) {
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "price", productSelect.price);
					this.$set(this.attr.productSelect, "stock", productSelect.stock);
					this.$set(this.attr.productSelect, "unique", productSelect.id);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", res);
					this.$set(this, "attrTxt", "已选择");
				} else {
					this.$set(this.attr.productSelect, "image", this.productInfo.image);
					this.$set(this.attr.productSelect, "price", this.productInfo.price);
					this.$set(this.attr.productSelect, "stock", 0);
					this.$set(this.attr.productSelect, "unique", this.productInfo.id);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				}
			},
			/**
			 * 购物车数量加和数量减
			 * 
			 */
			ChangeCartNum: function(changeValue) {
				//changeValue:是否 加|减
				//获取当前变动属性
				let productSelect = this.productValue[this.attrValue];
				//如果没有属性,赋值给商品默认库存
				if (productSelect === undefined && !this.attr.productAttr.length)
					productSelect = this.attr.productSelect;
				//无属性值即库存为0；不存在加减；
				if (productSelect === undefined) return;
				let stock = productSelect.stock || 0;
				let num = this.attr.productSelect;
				if (changeValue) {
					num.cart_num++;
					if (num.cart_num > stock) {
						this.$set(this.attr.productSelect, "cart_num", stock);
						this.$set(this, "cart_num", stock);
					}
				} else {
					num.cart_num--;
					if (num.cart_num < 1) {
						this.$set(this.attr.productSelect, "cart_num", 1);
						this.$set(this, "cart_num", 1);
					}
				}
				
			},
			attrVal(val) {
				this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attrValues[val
					.indexn]);
			},
			/**
			 * 购物车手动填写
			 */
			iptCartNum: function(e) {
				this.$set(this.attr.productSelect, 'cart_num', e ? e : 1);
			},
			
		}
	
	}
</script>

<style scoped lang="scss">
	.tabbar{
		position: fixed;
		background-color: #ffffff;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		// height: 128rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		.tabbar-title{
			font-size: 30rpx;
			margin-bottom: 18rpx;
		}
	}
	
	
	.productSort{
		display: flex;
		flex-direction: column;
		height: 100%;
		.shop{
			position: relative;
			height: 240rpx;
			top:0;
			left:0;
			right: 0;
			.shop-info{
				width: 100%;
				height: 100%;
				//设置半透明背景
				backdrop-filter: blur(8px);
				background-color: rgba(58, 58, 58, 0.2);
				display: flex;
				align-items: flex-end;
				.shop-info-item{
					display: flex;
					align-items: center;
					margin: 0 0 30rpx 30rpx;
					image{
						width: 120rpx;
						height: 120rpx;
						border-radius: 160rpx;
					}
					.shop-desc{
						display: flex;
						flex: 1;
						flex-direction: column;
						justify-content: center;
						margin-left: 20rpx;
						text{
							font-size: 32rpx;
							font-weight: bold;
							color: white;
						}
						i{
							font-size: 24rpx;
							margin-top: 20rpx;
							color: white;
						}
						span{
							font-size: 24rpx;
							font-weight: bold;
							margin-top: 10rpx;
							color: white;
						}
					}
					.shop-go{
						width: 48rpx;
						height: 120rpx;
						line-height: 120rpx;
					}
					
				}
				
				
			}
			.shop-bg{
				position: absolute;
				height: 100%;
				width: 100%;
			}
		}
		
		.header{
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			.search{
				flex: 1;
				height: 64rpx;
				line-height: 64rpx;
				display: flex;
				margin: 0 30rpx;
				align-items: center;
				border-radius: 60rpx;
				padding: 8rpx 30rpx;
				background-color: #f1f1f1;
				input{
					font-size: 24rpx;
					margin-left: 20rpx;
				}
			}
			.shippingType{
				display: flex;
				height: 52rpx;
				line-height: 52rpx;
				justify-content: flex-end;
				align-items: center;
				margin-right: 30rpx;
				border: 2rpx solid $theme-color;
				border-radius: 52rpx;
			}
		}
		
		.content{
			display: flex;
			height: calc(100% - 100rpx);
			.left{
				width: 220rpx;
				height: 100%;
				background-color: #fff;
				.item {
					height: 100rpx;
					width: 100%;
					font-size: 26rpx;
					color: #424242;
				}
				.on {
					background-color: #f5f5f5;
					border-left: 8rpx solid $theme-color;
					width: 100%;
					text-align: center;
					color: $theme-color;
					font-weight: bold;
				}
			}
			.right{
				flex: 1;
				height: 100%;
				
				margin: 0 16rpx;
				.listw {
					padding-top: 20rpx;
				}
				
				.listw .title {
					height: 90rpx;
				}
				
				.listw .title .line {
					width: 100rpx;
					height: 2rpx;
					background-color: #f0f0f0;
				}
				
				.listw .title .name {
					font-size: 28rpx;
					color: #333;
					margin: 0 30rpx;
					font-weight: bold;
				}
				
				
				.list .item {
					width: 100%;
					display: flex;
					flex-direction: column;
					margin: 0;
					padding: 16rpx ;
					background-color: #fff;
					border-bottom: 1rpx solid #f5f5f5;
					border-radius: 14rpx;
				}
				.list .item.on {
					width: 100%;
					display: flex;
					flex-direction: row;
					padding: 16rpx ;
					margin: 0;
					border-bottom: 1rpx solid #f5f5f5;
					border-radius: 14rpx;
				}
				
				.list .item .pictrue {
					width: 100%;
					height: 335rpx;
				}
				
				.list .item .pictrue.on {
					width: 150rpx;
					height: 150rpx;
				}
				
				.list .item .pictrue image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}
				
				.list .item .pictrue image.on {
					width: 150rpx;
					height: 150rpx;
					border-radius: 20rpx;
				}
				
				.list .item .text {
					padding: 18rpx 20rpx;
					font-size: 30rpx;
					color: #222;
					font-weight: bold;
				}
				
				.list .item .text.on {
					width: 100%;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					padding: 0 0 0 20rpx;
				}
				
				.list .item .text .money {
					font-size: 26rpx;
					font-weight: bold;
					margin-top: 8rpx;
				}
				
				.list .item .text .money.on {
					margin-top: 20rpx;
				}
				
				.list .item .text .money .num {
					font-size: 34rpx;
				}
				
				.list .item .text .vip {
					font-size: 24rpx;
					color: #aaa;
					margin-top: 7rpx;
				}
				
				.list .item .text .vip.on {
					margin-top: 10rpx;
				}
				
				.list .item .text .vip .vip-money {
					font-size: 24rpx;
					color: #282828;
					font-weight: bold;
				}
				
				.list .item .text .vip .vip-money image {
					width: 46rpx;
					height: 21rpx;
					margin-left: 4rpx;
				}
				.item-content{
					position: relative;
					width: 100%;
					.add-cart{
						position: absolute;
						bottom: 20rpx;
						right: 0;
						.more-spec{
							position: relative;
							padding: 10rpx 16rpx 0 0;
							.more-spec-text{
								color: white;
								background-color: $theme-color;
								padding: 4rpx 16rpx;
								border-radius: 16rpx;
								font-size: 24rpx;
							}
							.more-cart-num{
								position: absolute;
								top: 0;
								right: 0;
								background-color: $theme-color;
								min-width: 30rpx;
								height: 30rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								color: white;
								padding: 0 8rpx;
								border: 2rpx solid white;
								border-radius: 30rpx;
								font-size: 24rpx;
							}
						}
						.one-spec{
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 0 16rpx 0 0;
							view{
								border-radius: 40rpx;
								height: 40rpx;
								width: 40rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 36rpx;
								font-weight: bold;
								padding-bottom: 6rpx;
							}
							.sub{
								background-color: white;
								border: 4rpx solid $theme-color;
								color: $theme-color;
							}
							.add{
								background-color: $theme-color;
								color: white;
							}
							.num{
								padding: 0 16rpx;
								min-width: 40rpx;
								text-align: center;
								font-weight: bold;
								font-size: 28rpx;
							}
						}
						
					}
					
					
					
				}
				
				
			}
				
		}
		
		.bottom{
			height: 96rpx;
			width: 100%;
			position: fixed;
			bottom: 100rpx;
			z-index: 999;
		}
	}

</style>
